<template>
    <div class="box">

        <div class="grou-card-box">
            <GroupCard @itemClick="groupItemClick" />
        </div>
        <div class="table-card-box">
            <TableCard ref="tableCard" />
        </div>
            
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import GroupCard from './components/GroupCard.vue';
import TableCard from './components/TableCard.vue';

let tableCard = ref();

let groupItemClick = (item: any) => {
    tableCard.value.toGroupCode(item.code);
};


</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;
}

.card {
    height: 100%;
    box-shadow: none;
    border: 2px solid #ebeef5;
}

.grou-card-box{
    display: inline-block;
    width: 240px;
    height: 100%;
    margin-right: 20px;
    color: #666666;
}

.table-card-box{
    display: inline-block;
    width: calc(100% - 240px - 20px);
    height: 100%;
}
</style>